<template>
  <div class="contentbox">
    <div class="box">
      <div class="topbox">
        <div class="topLeft">场景管理</div>
      </div>
      <dk-divider style="margin: 20px"></dk-divider>
      <div class="centerbox">
        <div class="formbox">
          <t-form
            v-show="!isFold"
            ref="form"
            :rules="FORM_RULES"
            :data="formData"
            :layout="'inline'"
            scroll-to-first-error="smooth"
            :class="isFold ? '' : 'paddingBottom'"
            labelAlign="right"
          >
            <t-form-item
              label="场景ID"
              name="sceneid"
              :label-width="90"
              requiredMark
            >
              <t-input
                placeholder="场景ID"
                v-model="formData.sceneid"
                style="width: 165px"
              />
            </t-form-item>
            <t-form-item
              label="场景名称"
              name="scenename"
              :label-width="90"
              requiredMark
            >
              <t-input
                placeholder="请输入场景名称"
                v-model="formData.scenename"
                style="width: 165px"
              />
            </t-form-item>
            <t-form-item
              label="发布状态"
              name="release"
              :label-width="90"
              requiredMark
            >
              <t-select
                placeholder="请选择发布状态"
                v-model="formData.release"
                :options="platformOptions"
                filterable
                style="width: 165px"
              ></t-select>
            </t-form-item>

            <t-form-item
              label="创建人"
              name="creater"
              :label-width="90"
              requiredMark
            >
              <t-input
                placeholder="请输入创建人"
                v-model="formData.creater"
                style="width: 165px"
              />
            </t-form-item>

            <!-- <dk-button>测试</dk-button> -->
            <t-form-item class="formHandleBox" v-if="!isFold" :label-width="0">
              <t-space size="small" style="gap: 10px;">
                <dk-button @click="handleQuery">查询</dk-button>
                <dk-button @click="handleReset">创建场景话术</dk-button>
              </t-space>
            </t-form-item>
          </t-form>
        </div>
        <div class="tableBox">
          <div class="topbuttons">
            <!-- <t-radio-group
              v-model="reserveSelectedRowOnPaginate"
              variant="default-filled"
            >
              <t-radio-button :value="true">跨分页选中</t-radio-button>
              <t-radio-button :value="false">当前页选中</t-radio-button>
            </t-radio-group> -->
            <dk-button type="outlineWarning">停用</dk-button>
            <dk-button type="outlinePrimary">发布</dk-button>
          </div>

          <t-table
            row-key="index"
            :pagination="pagination"
            :columns="columns"
            :data="data"
            drag-sort="col"
            lazy-load
            @drag-sort="onDragSort"
            :editable-row-keys="editableRowKeys"
            :selected-row-keys="selectedRowKeys"
            @select-change="rehandleSelectChange"
          >
          </t-table>
        </div>
      </div>
    </div>
  </div>
  <creatSceneWords :isshow="isshow" @event="close"></creatSceneWords>
</template>

<script setup lang="jsx">
import { reactive, ref } from "vue";
import creatSceneWords from "./components/creatSceneWords.vue";
import { platformOptions, initialColumns } from "./formcolumn/sceneManagement";

// 创建场景话术弹窗开关
const isshow = ref(false);
// form 表单
const formData = reactive({
  sceneid: "", //场景ID
  scenename: "", //场景名称
  release: "", //发布状态
  creater: "", //创建人
});

const editableRowKeys = ref(["1"]);

const selectedRowKeys = ref([]); //选中行数组
const rehandleSelectChange = (value, ctx) => {
  //全选事件
  selectedRowKeys.value = value;
  console.log(value, ctx);
};


// 表格操作列
const columnsobj = ref({
  colKey: "operation",
  title: "操作",
  fixed: "right",
  width: "304",
  align: 'center',
  cell: (h, { row }) => {
    // const editable = editableRowKeys.value.includes(row.key);
    return (
      <div class="table-operations">
        {(
          <dk-button
          type="primary"
            hover="color"
            data-id={row.key}
            onClick={onEdit}
          >
            编辑
          </dk-button>
        )}
        {(
            <dk-button style="margin-left: 10px" type="outlinePrimary" hover="color" data-id={row.key} onClick={onreplication}>
              复制
            </dk-button>
        )}
        {row.isshow && (
            <dk-button style="margin-left: 10px" type="outlinePrimary" hover="color" data-id={row.key} onClick={ () => onrelease(row)}>
              发布
            </dk-button>
        )}
        {!row.isshow && (
            <dk-button style="margin-left: 10px" type="outlineWarning" hover="color" data-id={row.key} onClick={ () => ondeactivate(row)}>
              停用
            </dk-button>
        )}
        {(
            <dk-button style="margin-left: 10px" type="warning" hover="color" data-id={row.key} onClick={ondelete}>
              删除
            </dk-button>
        )}
      </div>
    );
  },
});
const columns = ref([...initialColumns, columnsobj.value]);

// 表格数据
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    index: i + 1,
    applicant: ["贾明", "张三", "王芳"][i % 3],
    mobilephonenum: ["13333672892", "13333672892", "13333672892"][i % 3],
    calloutnum: i % 3,
    customizationlabsls: ["电子签署", "纸质签署", "纸质签署"][i % 3],
    detail: {
      email: ["w.cezkdudy@lhll.au", "r.nmgw@peurezgn.sl", "p.cumx@rampblpa.ru"][
        i % 3
      ],
    },
    dialoguevariables: [
      "宣传物料制作费用",
      "algolia 服务报销",
      "相关周边制作费",
      "激励奖品快递费",
    ][i % 4],
    dialoguerounds: [2, 3, 1, 4][i % 4],
    calltime: [
      "2022-01-01",
      "2022-02-01",
      "2022-03-01",
      "2022-04-01",
      "2022-05-01",
    ][i % 4],
  });
}

// 编辑
const onEdit = (e) => {
  // 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
  //   const { id } = e.currentTarget.dataset;
  //   if (!editableRowKeys.value.includes(id)) {
  //     editableRowKeys.value.push(id);
  //   }
  console.log("编辑");
};
// 复制
const onreplication = (e) => {
  // 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
  //   const { id } = e.currentTarget.dataset;
  //   if (!editableRowKeys.value.includes(id)) {
  //     editableRowKeys.value.push(id);
  //   }
  console.log("复制");
};
// 删除
const ondelete = (e) => {
  // 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
  //   const { id } = e.currentTarget.dataset;
  //   if (!editableRowKeys.value.includes(id)) {
  //     editableRowKeys.value.push(id);
  //   }
  console.log("删除");
};
// 发布
const onrelease = (row) => {
  // 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
    // const { id } = e.currentTarget.dataset;
    // if (!editableRowKeys.value.includes(id)) {
    //   editableRowKeys.value.push(id);
    // }
  console.log("发布", row);
};
// 停用
const ondeactivate = (row) => {
  // 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
    // const { id } = e.currentTarget.dataset;
    // if (!editableRowKeys.value.includes(id)) {
    //   editableRowKeys.value.push(id);
    // }
    console.log("停用", row);
//   console.log("停用");
};

// 分页
const pagination = reactive({
  //   current: 2,
  //   pageSize: 5,
  defaultCurrent: 2,
  defaultPageSize: 5,
  total: 100,
    // showJumper: true,
    showPageSize: true,
});

// 查询按钮
const handleQuery = () => {
  console.log(formData);
};
// 打开弹窗
const handleReset = () => {
  isshow.value = true;
};
// 关闭弹窗
const close = (val) => {
  isshow.value = val;
};

// currentData is going to be deprecated
const onDragSort = ({
  currentIndex,
  targetIndex,
  current,
  target,
  data,
  newData,
  e,
  sort,
}) => {
  console.log(
    "交换行",
    currentIndex,
    targetIndex,
    current,
    target,
    data,
    newData,
    e,
    sort
  );
  if (sort === "col") {
    columns.value = newData;
  }
};
</script>

<style lang="scss" scoped>
.contentbox {
  width: 100%;
  height: 100%;
  background-color: rgb(231, 231, 232);
  padding: 8px;
  overflow-y: scroll;

  .box {
    // width: 100%;
    // height: 100%;
    border-radius: 4px;
    background-color: #fff;
    // height: 65px;
    padding: 20px 20px 17px 20px;

    .topbox {
      font-size: 16px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      display: flex;
    }
    .centerbox {
      // padding: 20px 0;
      .tableBox {
        margin-top: 30px;
        .topbuttons {
          display: flex;
          margin-bottom: 2px;
          .dk-button {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
.formHandleBox {
  margin: 0;
}
:deep(.t-pagination .t-pagination__select) {
  position: relative;
  height: 28px !important;
}
:deep(.t-form-inline .t-form__item) {
	min-width: 60px !important;
}
</style>